<template>
	<view class="j-goods-details">
		<!-- 轮播图 -->
		<view class="j-g-d-swiper"><u-swiper :list="goodsInfo.goodsMall.newGoodsImages" :height="750"></u-swiper></view>
		<!-- 商品价格 -->
		<view class="j-g-d-info">
			<view class="j-g-d-s">
				<text class="j-g-d-symbol">￥</text>
				<text class="j-g-d-selling">{{ goodsInfo.goodsMall.price ? goodsInfo.goodsMall.price : '0.00' }}</text>
				<text
					class="j-g-d-market">￥{{ goodsInfo.goodsMall.purchasePrice ? goodsInfo.goodsMall.purchasePrice : '0.00' }}</text>
			</view>
			<!-- 知豆 -->
			<!-- <view class="j-goods-integral">
				<view class="j-goods-i-box">
					<view class="j-goods-i-title">赠</view>
					<view class="j-goods-i-value">知豆{{ goodsInfo.goodsMall.integral ? goodsInfo.goodsMall.integral : '0' }}</view>
				</view>
			</view> -->
		</view>
		<!-- 商品名称 -->
		<view class="j-g-d-title">{{ goodsInfo.goodsMall.goodsName ? goodsInfo.goodsMall.goodsName : '' }}</view>
		<!-- 选择信息 -->
		<view class="j-g-d-select">
			<view class="j-g-d-row" v-if="goodsInfo.skuList.length" @click="buyNow">
				<view class="j-g-d-s-title">规格</view>
				<view class="j-g-d-s-middle">请选择具体规格</view>
				<view class="j-g-d-s-right">
					<view class="hxf hxf-youbian"></view>
				</view>
			</view>
			<view class="j-g-d-row" @click="showRegion">
				<view class="j-g-d-s-title">发货</view>
				<view class="j-g-d-s-middle">{{ freightInfo.selectRegion }}</view>
				<view class="j-g-d-s-right">
					<template v-if="freightInfo.status">
						{{ freightInfo.status }}
					</template>
					<template v-else>
						<view class="hxf hxf-youbian"></view>
					</template>
				</view>
			</view>
		</view>
		<!-- 商品详情标题 -->
		<view class="j-g-d-t-head">商品详情</view>
		<!-- 商品详情内容 -->
		<view class="j-g-d-t-content" style="padding-bottom: 12vh;"><u-parse :html="goodsInfo.goodsMall.goodsInfo"
				:tag-style="style" :show-with-animation="true"></u-parse></view>
		<!-- 立即购买按钮 -->
		<view class="j-g-d-t-btn">
			<view class="j-g-d-t-buy" @click="buyNow">立即购买</view>
			<view class="j-g-d-t-shop" @click="buyShop">加入购物车</view>

		</view>
		<!-- 显示选择地区 -->
		<u-picker v-model="isShowRegion" mode="region" @confirm="selectRegion"></u-picker>
		<!-- 显示选择规格 -->
		<u-mask :show="isShowSku" @click="isShowSku = false">
			<view class="j-g-sku">
				<view class="j-g-sku-box" @tap.stop>
					<!-- 商品信息和删除按钮 -->
					<view class="j-g-sku-goods-info">
						<view class="j-g-sku-goods">
							<view class="j-g-sku-goods-image">
								<image :src="selectSpce.specImages" mode="aspectFill"></image>
							</view>

							<view class="j-g-sku-goods-dec">
								<view class="j-g-sku-goods-price">
									￥
									<text class="j-g-sku-goods-num">{{ selectSpce.price }}</text>
								</view>
								<!-- <view class="j-goods-integral">
									<view class="j-goods-i-box">
										<view class="j-goods-i-title">赠</view>
										<view class="j-goods-i-value">知豆{{ selectSpce.integral }}</view>
									</view>
								</view> -->
								<view class="j-g-sku-g-i">{{ selectSpce.specValue }}</view>
							</view>
						</view>
						<view class="j-g-sku-cencal" @click="isShowSku = false"><u-icon name="close-circle-fill"
								color="#9F9F9F" size="48"></u-icon></view>
					</view>
					<!-- 规格信息 -->
					<view class="j-g-sku-info">
						<view class="j-g-sku-i-row" v-for="(value, index) in specGroup" :key="index">
							<view class="j-g-sku-i-name">{{ value.specName }}</view>
							<view class="j-g-sku-i-val">
								<u-tag v-for="(v, i) in value.specValue" :key="i" @click="selectSkuItem(index, i)"
									class="j-g-sku-i-item" :text="v.value" mode="plain"
									:type="v.select ? 'warning' : 'info'" />
							</view>
						</view>
					</view>
					<!-- 购买数量 -->
					<view class="j-g-buy-num">
						<view class="j-g-buy-title">购买数量</view>
						<u-number-box :min="1" @change="skuGoodsNumChange"></u-number-box>
					</view>
					<!-- 规格商品立即购买 -->
					<view class="j-g-buy-immediately">
						<view class="j-g-d-t-buy1" shape="circle" hover-class="none" @click="toConfirmOrder">{{buyName}}
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				disableBtn: false,
				// 选择地区的显示隐藏控制
				isShowRegion: false,
				// 显示规格的显示隐藏控制
				isShowSku: false,
				// 查询详情商品的回显信息
				goodsInfo: {
					skuList: [],
					goodsMall: {}
				},
				// 所有规格显示
				specGroup: [],
				// 手动选中规格显示
				selectSpce: {
					price: '',
					integral: '',
					specValue: '',
					specImages: ''
				},
				// 模板运费的查询参数
				params: {
					freightId: '',
					regionId: ''
				},
				// 跳转下单页面需要的参数
				orderParams: {
					goodsMallId: '',
					goodsMallSkuId: '',
					goodsMallNum: 1,
					goodsImages: '',
					goodsName: '',
					integral: '',
					specValue: '',
					freightRule: '',
					freightPrice: 0,
					freightId: 0,
					price: ''
				},
				// 页面运费的显示信息
				freightInfo: {
					selectRegion: '请选择配送至地区',
					status: ''
				},
				// 富文本编辑器的内容样式控制
				style: {
					img: 'margin-top:-8rpx'
				},
				buyName: '立刻购买'
			};
		},
		onLoad(e) {
			// 当前页面商品id参数
			this.params.goodsMallId = e.goodsMallId;
			// 下单页面商品id参数整理
			this.orderParams.goodsMallId = e.goodsMallId;
			// 查询商品详情
			this.postFindGoodsDetail();
		},
		methods: {
			// 点击立即购买
			buyNow() {
				// 判断当前商品有没有规格
				// 有规格
				this.buyName = '立即购买'
				if (this.goodsInfo.skuList.length) {
					// 赋值默认显示的商品信息
					this.selectSpce.price = this.goodsInfo.goodsMall.price;
					this.selectSpce.integral = this.goodsInfo.goodsMall.integral;
					this.selectSpce.specImages = this.goodsInfo.goodsMall.newGoodsImages[0].image;

					// 显示选择规格
					this.isShowSku = true;
					return false;
				}
				// 跳转确认订单页面
				this.toConfirmOrder();
			},
			buyShop() {
				this.buyName = '加入购物车'
				console.log(this.buyName, "11111111111111123123213")
				if (this.goodsInfo.skuList.length) {
					// 赋值默认显示的商品信息
					this.selectSpce.price = this.goodsInfo.goodsMall.price;
					this.selectSpce.integral = this.goodsInfo.goodsMall.integral;
					this.selectSpce.specImages = this.goodsInfo.goodsMall.newGoodsImages[0].image;
					// 显示选择规格
					this.isShowSku = true;
					return false;
				}
				this.toConfirmOrder();
			},
			// 跳转下单页面
			toConfirmOrder() {
				let that = this
				this.disableBtn = true;
				// 如果是规格商品
				if (this.goodsInfo.skuList.length) {
					// 判断是否选中规格
					if (this.$u.test.isEmpty(this.orderParams.goodsMallSkuId)) {
						this.$refs.uToast.show({
							title: '请选择商品规格'
						});
						return false;
					}
				}

				if (this.buyName == '立即购买') {
					this.disableBtn = false;
					uni.navigateTo({
						url: '../confirm-order/confirm-order?orderParams=' + encodeURIComponent(JSON.stringify(this
							.orderParams)) + '&isDetail="1"'
					});
					this.$u.api
						.postIsLogin()
						.then(res => {
							setTimeout(() => {}, 1000)
							// console.log(res,"resresres")
							console.log(this.orderParams, "re111sresres")
							// this.orderParams.orderType = uni.getStorageSync('orderTyp
						})
						.catch(err => {
							setTimeout(() => {
								this.disableBtn = false;
							}, 1000)
							// if (err.status == 401) {
							// 	uni.navigateTo({
							// 		url: '../../login'
							// 	});
							// 	return false;
							// }
						});
				} else {
					let params = {
						goodsId: this.orderParams.goodsMallId,
						goodsNum: this.orderParams.goodsMallNum,
						goodsSkuId: this.orderParams.goodsMallSkuId
					}
					that.$u.api
						.postaddShoppingCart(params)
						.then(res => {
							console.log(res,"ressss”")
							this.$refs.uToast.show({
								title: '加入购物成功'
							});
						})
				}

			},
			// 点击显示选择地区
			showRegion() {
				this.isShowRegion = true;
			},
			// 选择地区
			selectRegion(e) {
				this.freightInfo.selectRegion = '至' + e.city.label + e.area.label;
				// 判断商品是否有固定运费，运费规则,1：固定运费，2：运费模板
				if (this.goodsInfo.goodsMall.freightRule == 1) {
					if (this.goodsInfo.goodsMall.freightPrice) {
						this.freightInfo.status = '运费￥' + this.goodsInfo.goodsMall.freightPrice;
					} else {
						this.freightInfo.status = '包邮';
					}
				}
				if (this.goodsInfo.goodsMall.freightRule == 2) {
					// 整理查询运费价格的参数
					this.params.freightId = this.goodsInfo.goodsMall.freightId;
					this.params.regionId = e.area.value;
					// 调用查询运费的接口
					this.postQueryFreightPrice();
				}
			},
			// 查询运费是否包邮，是否可配送
			postQueryFreightPrice() {
				this.$u.api
					.postQueryFreightPrice(this.params)
					.then(res => {
						if (res.data.isDelivery) {
							this.freightInfo.status = '运费￥' + res.data.freightDetail.firstPrice;
						} else {
							this.freightInfo.status = '不支持配送';
						}
					})
					.catch(err => {
						this.freightInfo.status = '不支持配送';
					});
			},
			// 查询商品详情
			postFindGoodsDetail() {
				this.$u.api
					.postFindGoodsDetail(this.params)
					.then(res => {
						// 设置商品标题
						uni.setNavigationBarTitle({
							title: res.data.goodsMall.goodsName
						});
						// 整理轮播图图片
						let arr = [];
						let newImage = JSON.parse(res.data.goodsMall.goodsImages);
						newImage.forEach(v => {
							arr.push({
								image: v
							});
						});
						res.data.goodsMall.newGoodsImages = arr;

						// 整理商品规格的显示
						if (res.data.skuList.length) {
							let spec = JSON.parse(res.data.goodsMall.specGroup);
							let arraySpec = [];
							// 整理规格格式，格式化成能够选择格式的数据
							for (let i in spec) {
								let obj = {},
									arr = [];
								obj.specName = i;
								spec[i].forEach(x => {
									arr.push({
										select: false,
										value: x
									});
								});
								obj.specValue = arr;
								arraySpec.push(obj);
							}
							this.specGroup = arraySpec;
						}

						// 下单页面参数赋值
						this.orderParams.goodsImages = res.data.goodsMall.newGoodsImages[0].image;
						this.orderParams.goodsName = res.data.goodsMall.goodsName;
						this.orderParams.integral = res.data.goodsMall.integral;
						this.orderParams.freightRule = res.data.goodsMall.freightRule;
						this.orderParams.freightPrice = res.data.goodsMall.freightPrice;
						this.orderParams.freightId = res.data.goodsMall.freightId;
						this.orderParams.price = res.data.goodsMall.price;

						// 传值给全局变量
						this.goodsInfo = res.data;
					})
					.catch(err => {});
			},
			// 选中规格index:第index行的规格，i:当前行第i个数据
			selectSkuItem(index, i) {
				// 根据每个规格项的select控制显示样式
				this.specGroup[index].specValue.forEach(v => {
					v.select = false;
				});
				this.specGroup[index].specValue[i].select = true;
				// 整理下单页面需要的规格id，根据选中的规格项与详情里面的skuList进行比对取规格id
				// 并回显页面的规格商品的显示
				let arr = [];
				this.specGroup.forEach(v => {
					v.specValue.forEach(x => {
						if (x.select) {
							arr.push(x.value);
						}
					});
				});
				let str = arr.join(',');
				// 对比选出一样的规格并赋值
				this.goodsInfo.skuList.forEach(v => {
					if (str == v.specValue) {
						if (!v.specImages) {
							v.specImages = this.goodsInfo.goodsMall.newGoodsImages[0].image;
						}
						this.selectSpce = v;
						return false;
					}
				});
				// 整理下单页规格id参数
				this.orderParams.goodsMallSkuId = this.selectSpce.goodsMallSkuId;
				this.orderParams.goodsImages = this.selectSpce.specImages ? this.selectSpce.specImages : this.goodsInfo
					.goodsMall.newGoodsImages[0].image;
				this.orderParams.integral = this.selectSpce.integral;
				this.orderParams.specValue = this.selectSpce.specValue;
				this.orderParams.price = this.selectSpce.price;
			},
			// 选择规格数量，整理购买规格商品数量参数
			skuGoodsNumChange(e) {
				this.orderParams.goodsMallNum = e.value;
			}
		}
	};
</script>

<style>
	page {
		background-color: #f3f3f3;
	}
</style>
<style scoped lang="scss">
	.j-goods-details {
		.j-g-buy-immediately {
			padding-top: 10rpx;
			padding-bottom: 25rpx;
		}

		.j-g-buy-num {
			padding: 30rpx 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.j-g-d-t-buy {
			width: 200rpx;
			height: 5vh;
			font-size: 28rpx;
			color: #FFFFFF;
			float: right;
			margin-top: 25rpx;
			margin-right: 30rpx;
			background: #003B40;
			line-height: 5vh;
			border-radius: 40px;
			text-align: center;
			// background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&:after {
				border: 0;
			}
		}

		.j-g-d-t-buy1 {
			width: 90%;
			height: 5vh;
			font-size: 28rpx;
			color: #FFFFFF;
			float: right;
			/* margin-top: 25rpx; */
			margin-right: 30rpx;
			background: #003B40;
			line-height: 5vh;
			border-radius: 40px;
			text-align: center;
			margin-bottom: 40rpx;
			// background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&:after {
				border: 0;
			}
		}


		.j-g-d-t-shop {
			width: 200rpx;
			height: 5vh;
			font-size: 28rpx;
			color: #003B40;
			float: right;
			margin-top: 25rpx;
			margin-right: 30rpx;
			border: 1px solid #055A61;
			line-height: 5vh;
			border-radius: 40px;
			text-align: center;
			// background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&:after {
				border: 0;
			}
		}


		.j-g-sku {
			display: flex;
			height: 100%;
			flex-direction: column;
			justify-content: flex-end;

			.j-g-sku-box {
				border-radius: 14rpx 14px 0 0;
				background-color: #ffffff;

				.j-g-sku-goods-info {
					display: flex;
					padding: 25rpx;
					align-items: flex-start;
					justify-content: space-between;

					.j-g-sku-goods {
						flex: 1;
						display: flex;

						.j-g-sku-goods-image {
							width: 170rpx;
							height: 170rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.j-g-sku-goods-dec {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;

						.j-g-sku-goods-price {
							color: red;

							.j-g-sku-goods-num {
								font-size: 45rpx;
								font-weight: bold;
							}
						}

						.j-g-sku-g-i {
							color: #a6a6a6;
							font-size: 26rpx;
						}
					}
				}

				.j-g-sku-info {

					.j-g-sku-i-row {
						margin-top: 20rpx;

						&:first-of-type {
							margin-top: 0;
						}

						.j-g-sku-i-name {
							margin-bottom: 10rpx;
							padding-left: 25rpx;
							padding-right: 25px;
							font-size: 28rpx;
						}

						.j-g-sku-i-val {
							padding-left: 15rpx;
							padding-right: 15rpx;

							.j-g-sku-i-item {
								margin: 10rpx;
							}
						}

					}
				}
			}
		}

		.j-g-d-info {
			display: flex;
			align-items: center;
			padding: 16rpx 25rpx;
			justify-content: space-between;
			background-color: #ffffff;

			.j-g-d-s {
				color: red;

				.j-g-d-selling {
					font-size: 50rpx;
					font-weight: bold;
				}

				.j-g-d-market {
					color: #a6a6a6;
					margin-left: 10rpx;
					text-decoration: line-through;
				}
			}
		}

		.j-g-d-title {
			background-color: #ffffff;
			font-size: 32rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			padding-bottom: 22rpx;
		}

		.j-g-d-select {
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 12rpx 0;

			.j-g-d-row {
				font-size: 28rpx;
				padding: 14rpx 25rpx;
				display: flex;
				align-items: center;

				.j-g-d-s-title {
					color: #797979;
					width: 100rpx;
				}

				.j-g-d-s-middle {
					flex: 1;
				}

				.j-g-d-s-right {
					width: 230rpx;
					text-align: right;

					.hxf-youbian {
						color: #797979;
						font-size: 40rpx;
						padding-top: 5rpx;
					}
				}
			}
		}

		.j-g-d-t-head {
			text-align: center;
			padding: 25rpx;
			font-size: 28rpx;
		}

		.j-g-d-t-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;
			background: #fff;
			// display: flex;
			// justify-content: space-around;
			// align-items: center;

		}
	}

	.j-goods-integral {
		padding: 10rpx;
		display: flex;

		.j-goods-i-box {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(254, 166, 2, 1);
			border-radius: 5rpx;
			font-size: 28rpx;

			.j-goods-i-title {
				color: #ffffff;
				display: flex;
				padding: 0 10rpx;
				align-items: center;
				justify-content: center;
				background-color: #fea602;
			}

			.j-goods-i-value {
				color: #fea602;
				padding: 0 10rpx;
			}
		}
	}
</style>